/* --------------------------------------------------------- INDEX --------------------------------------------------------- */ /* 1. Design Tokens + Base Styles 2. Onboarding UX Sections 2 (Application Layout) and 3 (Navigation Bar) were retired in Stage 9: every class they defined (.app-layout, .app-shell, .app-sidebar, .app-content, .nav-sidebar, .menu-*, .submenu-*, .user-block, .theme-toggle, .pill, .brand-logo, .brand-name, etc.) was orphaned when Stage 3a swapped MainLayout for AppShell + Sidebar + Topbar. The replacement chrome lives in design-system.css (BEM-style .sidebar__*, .topbar__*, .app-shell__*) and is loaded after this file in App.razor's . */ /* ----------------------------------------------- 1) Design Tokens + Base Styles ----------------------------------------------- */ :root { --brand-base: #121a24; /* OKLCH tones derived from brand-base hue */ --brand-95: oklch(from var(--brand-base) 96% .02 h); --brand-90: oklch(from var(--brand-base) 92% .04 h); --brand-80: oklch(from var(--brand-base) 83.5% .085 h); --brand-60: oklch(from var(--brand-base) 67% .175 h); --brand-50: oklch(from var(--brand-base) 57% .20 h); --brand-40: oklch(from var(--brand-base) 47% .185 h); /* Roles */ --brand-primary: var(--brand-50); --brand-primary-strong: var(--brand-40); --brand-primary-weak: var(--brand-80); /* Surfaces & text */ --surface: #fff; --surface-weak: #f6f7f9; --surface-strong: var(--brand-90); --text: #1f2328; --text-weak: #5e6770; --border: #0f1215; /* Sidebar + content */ --sidebar-bg: var(--brand-base); --sidebar-border: #000; --content-bg: var(--brand-primary-strong); --content-well-bg: #fff; /* Tabs */ --tab-bg: var(--surface); --tab-border: #000; --tab-active-bg: var(--surface); --tab-active-border: #000; } /* ==================================================================== 2) Onboarding UX — ob-* namespace Dark-sidebar split-panel redesign. ==================================================================== */ /* ---- Full-viewport shell ---- */ .ob-layout { display: flex; height: 100vh; overflow: hidden; } /* ---- Dark sidebar ---- */ .ob-sidebar { flex: 0 0 45%; background: #0e1c2f; display: flex; flex-direction: column; /* Minimal side padding so preview fills wall-to-wall; keep top/bottom at 1rem for header + footer breathing room. */ padding: 1rem 0.375rem; overflow: hidden; } .ob-sidebar-header { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } /* Logo icon + "Eight28" word-mark grouped together */ .ob-sidebar-brand { display: flex; align-items: center; gap: 0.5rem; } .ob-sidebar-logo { height: 34px; width: auto; flex-shrink: 0; } .ob-sidebar-brand-name { font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; white-space: nowrap; } .ob-sidebar-step-counter { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); } .ob-sidebar-preview { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; overflow: hidden; gap: 1rem; } .ob-sidebar-preview-img { max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4)); } .ob-sidebar-preview-placeholder { width: 80%; height: 60%; min-height: 180px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); } .ob-sidebar-footer { display: flex; justify-content: space-between; align-items: flex-end; flex-shrink: 0; gap: 1rem; } .ob-sidebar-tagline { font-size: 0.83rem; font-style: italic; color: rgba(255, 255, 255, 0.32); line-height: 1.4; max-width: 68%; } .ob-sidebar-duration { font-size: 0.73rem; color: rgba(255, 255, 255, 0.28); white-space: nowrap; } /* ---- White content pane ---- */ .ob-content { flex: 1; display: flex; flex-direction: column; background: #ffffff; overflow: hidden; } .ob-content-scroll { flex: 1; overflow-y: auto; padding: 3rem 3.5rem 1.5rem; } .ob-content-inner { max-width: 640px; width: 100%; margin: 0 auto; } /* ---- Progress stepper ---- */ .ob-stepper { display: flex; align-items: flex-start; margin-bottom: 3rem; } .ob-stepper-step { display: flex; flex-direction: column; align-items: center; } .ob-stepper-circle { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; flex-shrink: 0; transition: background 0.2s; } .ob-stepper-circle--done { background: var(--brand-primary, #14b8a6); color: #fff; } .ob-stepper-circle--active { background: var(--brand-primary, #14b8a6); color: #fff; box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.2); } .ob-stepper-circle--pending { background: #e5e7eb; color: #9ca3af; } .ob-stepper-label { font-size: 0.6rem; margin-top: 5px; white-space: nowrap; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .ob-stepper-label--done { color: var(--brand-primary, #14b8a6); } .ob-stepper-label--active { color: var(--brand-primary, #14b8a6); } .ob-stepper-label--pending { color: #9ca3af; } .ob-stepper-line { flex: 1; height: 2px; background: #e5e7eb; align-self: flex-start; margin-top: 14px; /* vertically centres the line with the 30px circle */ transition: background 0.2s; } .ob-stepper-line--done { background: var(--brand-primary, #14b8a6); } /* ---- Footer nav (back | hint | action) ---- */ .ob-footer { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 3.5rem; border-top: 1px solid #f0f2f5; background: #fff; flex-shrink: 0; gap: 1rem; } .ob-footer-spacer { /* Invisible placeholder so the three-column grid stays balanced when the Back button is not shown (first step). */ display: inline-block; min-width: 48px; } .ob-footer-back { background: none; border: none; padding: 0; font-size: 0.9rem; font-weight: 500; color: #6b7280; cursor: pointer; display: flex; align-items: center; gap: 0.3rem; transition: color 0.15s; } .ob-footer-back:hover { color: #374151; } .ob-footer-hint { font-size: 0.8rem; color: #9ca3af; display: flex; align-items: center; gap: 0.3rem; } .ob-footer-hint kbd { display: inline-flex; align-items: center; justify-content: center; padding: 1px 5px; border: 1px solid #d1d5db; border-radius: 3px; background: #f9fafb; font-size: 0.72rem; color: #6b7280; font-family: inherit; line-height: 1.4; } .ob-footer-action { display: flex; align-items: center; min-width: 48px; justify-content: flex-end; } /* ---- Sidebar brand card (Welcome step) ---- */ .ob-brand-card { background: linear-gradient(145deg, #0c9488, #14b8a6); border-radius: 22px; width: 140px; height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 10px 36px rgba(20, 184, 166, 0.45); flex-shrink: 0; } .ob-brand-card-number { font-size: 3rem; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -0.02em; } .ob-brand-card-divider { width: 52%; height: 2.5px; background: rgba(255, 255, 255, 0.55); margin: 0.35rem 0; border-radius: 2px; } /* ---- Sidebar optional text below preview ---- */ .ob-sidebar-content-title { font-size: 1rem; font-weight: 700; color: #fff; text-align: center; line-height: 1.3; margin: 0; padding: 0 0.5rem; } .ob-sidebar-content-desc { font-size: 0.78rem; color: rgba(255, 255, 255, 0.42); text-align: center; line-height: 1.55; margin: 0; padding: 0 0.5rem; } /* ---- Welcome page typography ---- */ .ob-welcome-greeting { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-primary, #14b8a6); margin-bottom: 0.6rem; } .ob-welcome-heading { font-size: 2.2rem; font-weight: 800; line-height: 1.2; color: #111827; margin-top: 0; margin-bottom: 0.75rem; } .ob-welcome-body { font-size: 0.95rem; line-height: 1.6; color: #6b7280; margin-bottom: 0; } /* ---- Welcome feature cards ---- */ .ob-welcome-cards { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1.5rem; } .ob-welcome-card { display: flex; align-items: flex-start; gap: 0.875rem; padding: 0.875rem 1rem; border: 1px solid #eef0f3; border-radius: 10px; background: #fafbfc; } .ob-welcome-card-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px; /* square with slightly rounded corners */ background: var(--brand-primary, #14b8a6); color: #fff; font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .ob-welcome-card-title { font-size: 0.9rem; font-weight: 600; color: #111827; margin: 0 0 0.2rem; line-height: 1.3; } .ob-welcome-card-desc { font-size: 0.8rem; color: #6b7280; margin: 0; line-height: 1.4; } /* ---- Shared step heading / body typography ---- */ .ob-step-heading { font-size: 1.9rem; font-weight: 800; line-height: 1.2; color: #111827; margin-top: 0; margin-bottom: 0.6rem; } .ob-step-body { font-size: 0.95rem; line-height: 1.6; color: #6b7280; margin-bottom: 1.75rem; } /* ---- Shared field stack ---- */ .ob-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1.25rem; } .ob-field-label { font-size: 0.85rem; font-weight: 600; color: #374151; margin: 0; } .ob-field-hint { font-size: 0.78rem; color: #9ca3af; margin: 0; } .ob-field-hint--success { color: #10b981; } .ob-field-error { font-size: 0.78rem; color: #ef4444; margin: 0; } /* ---- LIVE PREVIEW label ---- */ .ob-preview-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.35); text-align: center; flex-shrink: 0; } /* ---- Mini workspace preview (Workspace step) ---- */ .ob-workspace-preview { display: flex; width: 100%; height: 68%; /* % of .ob-sidebar-preview so it scales with any screen height */ border-radius: 10px; overflow: hidden; background: #f4f5f7; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); flex-shrink: 0; } /* Mini sidebar */ .ob-wp-sidebar { width: 130px; flex-shrink: 0; background: #ffffff; border-right: 1px solid #eef0f3; display: flex; flex-direction: column; padding: 0.55rem 0.45rem; } .ob-wp-brand { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.55rem; padding-bottom: 0.4rem; border-bottom: 1px solid #f0f0f0; } .ob-wp-icon { width: 20px; height: 20px; border-radius: 4px; background: var(--brand-primary, #14b8a6); color: #fff; font-size: 0.65rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ob-wp-name { font-size: 0.6rem; font-weight: 700; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 84px; } .ob-wp-nav { display: flex; flex-direction: column; gap: 1px; } .ob-wp-nav-item { font-size: 0.55rem; color: #6b7280; padding: 3px 5px; border-radius: 3px; line-height: 1.4; } .ob-wp-nav-item--active { background: rgba(20, 184, 166, 0.12); color: var(--brand-primary, #14b8a6); font-weight: 600; } /* Mini content area */ .ob-wp-content { flex: 1; padding: 0.55rem 0.5rem; overflow: hidden; background: #fafafa; } .ob-wp-content-title { font-size: 0.65rem; font-weight: 700; color: #111827; margin-bottom: 1px; } .ob-wp-content-subtitle { font-size: 0.5rem; color: #9ca3af; margin-bottom: 0.5rem; } .ob-wp-content-body { display: flex; flex-direction: column; gap: 0.3rem; } .ob-wp-placeholder-row { display: flex; gap: 0.3rem; } .ob-wp-placeholder { flex: 1; height: 38px; border-radius: 4px; background: #e5e7eb; } /* ---- URL pill ---- */ .ob-url-pill { flex-shrink: 0; padding: 0.3rem 1rem; background: rgba(20, 184, 166, 0.12); border: 1px solid rgba(20, 184, 166, 0.28); border-radius: 999px; font-size: 0.72rem; font-weight: 600; color: #14b8a6; letter-spacing: 0.01em; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Invoice preview (Address step) ---- */ .ob-invoice-preview { width: 100%; height: 68%; /* % of .ob-sidebar-preview — scales with screen height, same as workspace preview */ background: #fff; border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; padding: 0.75rem 0.875rem; gap: 0.45rem; overflow: hidden; flex-shrink: 0; } .ob-inv-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; flex-shrink: 0; } .ob-inv-brand { display: flex; align-items: center; gap: 0.35rem; min-width: 0; } .ob-inv-icon { width: 20px; height: 20px; border-radius: 4px; background: var(--brand-primary, #14b8a6); color: #fff; font-size: 0.62rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ob-inv-company { font-size: 0.62rem; font-weight: 700; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; } .ob-inv-number { font-size: 0.55rem; color: #9ca3af; white-space: nowrap; flex-shrink: 0; } .ob-inv-address { font-size: 0.55rem; color: #6b7280; line-height: 1.6; flex-shrink: 0; min-height: 3.5rem; /* reserve space so the card doesn't collapse while address is empty */ } .ob-inv-address-placeholder { color: #d1d5db; font-style: italic; } .ob-inv-lines { flex: 1; display: flex; flex-direction: column; gap: 0.28rem; overflow: hidden; } .ob-inv-line-row { display: flex; align-items: center; gap: 0.5rem; } .ob-inv-line-desc { flex: 1; height: 6px; border-radius: 3px; background: #e5e7eb; } .ob-inv-line-desc--short { max-width: 55%; } .ob-inv-line-amt { width: 36px; height: 6px; border-radius: 3px; background: #e5e7eb; flex-shrink: 0; } .ob-inv-divider { height: 1px; background: #e5e7eb; flex-shrink: 0; } .ob-inv-total { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .ob-inv-total-label { font-size: 0.62rem; font-weight: 600; color: #374151; } .ob-inv-total-amount { font-size: 0.72rem; font-weight: 700; color: var(--brand-primary, #14b8a6); } /* ---- Preview caption (below preview card) ---- */ .ob-preview-caption { font-size: 0.7rem; color: rgba(255, 255, 255, 0.42); text-align: center; line-height: 1.5; margin: 0; padding: 0 0.25rem; flex-shrink: 0; } /* ---- Business card preview (Contact step) ---- */ .ob-biz-card { width: 100%; height: 68%; /* same proportion as invoice / workspace previews */ background: #fff; border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); display: grid; grid-template-rows: auto 1fr auto; padding: 1rem 1.25rem 0.875rem; flex-shrink: 0; overflow: hidden; } .ob-biz-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .ob-biz-card-icon { width: 34px; height: 34px; border-radius: 7px; background: var(--brand-primary, #14b8a6); color: #fff; font-size: 0.9rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ob-biz-card-url { font-size: 0.58rem; color: #9ca3af; text-align: right; line-height: 1.4; padding-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Middle row: company name sits at the bottom of the flex cell */ .ob-biz-card-name { display: flex; align-items: flex-end; font-size: 1.05rem; font-weight: 800; color: #111827; line-height: 1.2; padding-bottom: 0.2rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ob-biz-card-contacts { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 0; } .ob-biz-card-phone { font-size: 0.62rem; color: #6b7280; white-space: nowrap; flex-shrink: 0; } .ob-biz-card-email { font-size: 0.62rem; color: var(--brand-primary, #14b8a6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; min-width: 0; } /* ---- Phone input group (flag/code select + number input) ---- */ .ob-phone-group { display: flex; border: 1px solid #d1d5db; border-radius: 8px; overflow: hidden; background: #fff; transition: border-color 0.15s, box-shadow 0.15s; } .ob-phone-group:focus-within { border-color: var(--brand-primary, #14b8a6); box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.12); } .ob-phone-group--invalid { border-color: #ef4444; } .ob-phone-group--invalid:focus-within { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); } .ob-phone-prefix { flex-shrink: 0; border: none; border-right: 1px solid #d1d5db; background: #f9fafb; padding: 0.5rem 1.6rem 0.5rem 0.7rem; font-size: 0.88rem; color: #374151; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; /* chevron icon */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.35rem center; background-size: 11px; min-width: 88px; } .ob-phone-prefix:focus { background-color: #f3f4f6; } .ob-phone-number { flex: 1; min-width: 0; border: none; outline: none; padding: 0.5rem 0.75rem; font-size: 0.9rem; color: #1f2328; background: transparent; } .ob-phone-number::placeholder { color: #9ca3af; } /* ---- Two-column field row (Address step) ---- */ .ob-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.75rem; } /* ---- Optional field label modifier ---- */ .ob-optional { font-size: 0.75rem; font-weight: 400; color: #9ca3af; } /* ---- Form helpers (shared across wizard steps) ---- */ .text-danger { font-size: 0.9rem; } .onboarding-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1rem; max-width: 640px; } .form-span-2 { grid-column: span 2; } input[readonly] { background-color: var(--input-disabled-bg, var(--color-background-sunken)); cursor: not-allowed; } .form-select:disabled { background-color: var(--input-disabled-bg, var(--color-background-sunken)); cursor: not-allowed; } /* ---- Google Places / Maps API ---- */ /* The new Places API (v2) shows a deprecation warning dialog for the legacy Autocomplete class. Suppress the dialog and its dismissed-state remnants. The pac-container is Google's suggestion dropdown; hiding it when empty removes the ghost border-line that appears after a selection or error. */ .gm-err-container, .gm-err-content, .gm-err-autocomplete { display: none !important; } .pac-container:empty { display: none !important; border: none !important; height: 0 !important; } /* ─── Step 6: Finish / Ready ───────────────────────────────────────────── */ /* "🎉 ALL SET" eyebrow label */ .ob-finish-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--color-primary, #009cbd); text-transform: uppercase; margin-bottom: 10px; } /* Sidebar success badge (checkmark + "{company} is ready") */ .ob-finish-success-card { display: flex; flex-direction: column; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 20px 16px 14px; width: 64%; margin: 0 auto 14px; } .ob-finish-check { width: 52px; height: 52px; border-radius: 14px; background: var(--color-primary, #009cbd); display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; line-height: 1; } .ob-finish-ready-text { font-size: 0.7rem; color: rgba(255, 255, 255, 0.65); text-align: center; font-weight: 400; line-height: 1.3; } /* Finish-page variant of the workspace preview — adds footer pill row */ .ob-workspace-preview--finish { flex: 1; } .ob-wp-content--finish { display: flex; flex-direction: column; overflow: hidden; } /* Address + email pills at the bottom of the mini preview */ .ob-wp-footer-pills { display: flex; gap: 4px; padding: 5px 8px 4px; border-top: 1px solid rgba(0, 0, 0, 0.06); margin-top: auto; flex-wrap: wrap; } .ob-wp-footer-pill { font-size: 0.48rem; color: var(--color-text-muted, #6b7280); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48%; } /* Setup summary card */ .ob-summary-card { background: #eef7fb; border: 1px solid #cce9f4; border-radius: var(--radius-md, 8px); overflow: hidden; margin-bottom: 1.5rem; } .ob-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 16px; border-bottom: 1px solid #cce9f4; } .ob-summary-row:last-child { border-bottom: none; } .ob-summary-label { font-size: var(--font-size-sm, 0.875rem); color: var(--color-text-muted, #6b7280); flex-shrink: 0; min-width: 72px; } .ob-summary-value { font-size: var(--font-size-sm, 0.875rem); color: var(--color-text-primary, #111827); text-align: right; font-weight: 450; word-break: break-all; } /* ─── Step 5: Branding — branded workspace preview ────────────────────── */ /* Apply the brand colour CSS var to the mini-app mockup */ .ob-workspace-preview--branded .ob-wp-icon { background: var(--ob-brand-color, #009cbd); } .ob-workspace-preview--branded .ob-wp-nav-item--active { color: var(--ob-brand-color, #009cbd); border-left-color: var(--ob-brand-color, #009cbd); } .ob-workspace-preview--branded .ob-wp-placeholder--accent { background: var(--ob-brand-color, #009cbd); opacity: 0.6; } /* Logo image shown in the mini sidebar */ .ob-wp-logo { width: 20px; height: 20px; object-fit: contain; border-radius: 3px; flex-shrink: 0; } /* Logo preview rendered inside the drop zone after upload */ .logo-drop-zone__preview { max-height: 80px; max-width: 80%; object-fit: contain; border-radius: var(--radius-sm, 4px); } /* ─── Colour swatch strip ──────────────────────────────────────────────── */ .ob-brand-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .ob-brand-swatch-btn { width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; flex-shrink: 0; outline: none; padding: 0; } .ob-brand-swatch-btn:hover { transform: scale(1.15); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } .ob-brand-swatch-btn--active { border-color: #fff; box-shadow: 0 0 0 2.5px var(--color-primary, #009cbd); } /* ─── Custom hex / colour-picker row ───────────────────────────────────── */ .ob-brand-custom { display: flex; align-items: center; gap: 8px; } /* Clickable colour swatch that wraps the native */ .ob-brand-picker-swatch { position: relative; width: 38px; height: 38px; border-radius: var(--radius-sm, 6px); border: 1px solid var(--color-border, #dde1e7); cursor: pointer; flex-shrink: 0; overflow: hidden; } .ob-brand-picker-swatch input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; } /* ---- Responsive ---- */ @media (max-width: 900px) { .ob-sidebar { flex: 0 0 34%; } .ob-content-scroll { padding: 2rem 2rem 1.5rem; } .ob-footer { padding: 1rem 2rem; } } @media (max-width: 640px) { .ob-layout { flex-direction: column; height: auto; min-height: 100vh; } .ob-sidebar { flex: none; height: 160px; padding: 1.25rem 1.5rem; } .ob-sidebar-preview { display: none; } .ob-content { flex: 1; } .ob-content-scroll { padding: 1.5rem; } .ob-footer { padding: 1rem 1.5rem; } .ob-footer-hint { display: none; } .onboarding-form-grid { grid-template-columns: 1fr; } .ob-field-row { grid-template-columns: 1fr; } }